<template>
  <div>
    <el-dialog title="提示" v-model="dialogVisible" width="30%">
      <span>确认要删除该条数据吗?</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleClose">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <div class="search">
      <el-form label-width="80px">
        <el-row>
          <el-col :span="6" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" style="padding: 0 8px;">
            <el-form-item label="姓名">
              <el-input v-model="searchObject.name" size="small" placeholder="姓名" name="name">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" style="padding: 0 8px;">
            <el-form-item label="电话">
              <el-input v-model="searchObject.phone" size="small" placeholder="电话" name="phone">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" style="padding: 0 8px;">
            <el-form-item label="身份证号">
              <el-input v-model="searchObject.cardNo" size="small" placeholder="身份证号" name="cardNo">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" style="padding: 0 10px;margin-top: 5px;">
            <el-row type="flex" justify="end">
              <el-button size="small" type="primary" @click="search">搜索</el-button>
              <el-button size="small" plain @click="clearSearch">清除条件</el-button>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="data-content">
      <div class="tool-add">
        <el-button type="primary" size="small" @click="addView">新增</el-button>
      </div>

      <el-table v-loading="loading" :data="tableData.list" @sort-change="changeTableSort"
                style="width: 100%;font-size: 12px;">
        <el-table-column label="姓名" prop="name" width="100">
        </el-table-column>
        <el-table-column label="头像" prop="avatar" width="100">
          <template #default="scope">
            <img :src="scope.row.avatar" style="width: 30px;height: auto">
          </template>
        </el-table-column>
        <el-table-column label="电话" prop="phone" width="100">
        </el-table-column>
        <el-table-column label="报名次数" prop="joinNum" width="100" sortable="custom">
        </el-table-column>
        <el-table-column label="可用余额" prop="tradeAccount" width="100" sortable="custom">
        </el-table-column>
        <!-- -->
        <el-table-column label="冻结金额" prop="frozenAccount.amount" width="100" sortable="custom">
          <template #default="scope">
            {{scope.row.frozenAccount}}
          </template>
        </el-table-column>

        <el-table-column label="会员等级" prop="billboardItemName" width="100">
        </el-table-column>
        <el-table-column label="认证状态" prop="auditStateName" width="80">
        </el-table-column>
        <el-table-column label="微信号" prop="wxNo" width="200">
        </el-table-column>
        <el-table-column label="抖音粉丝" prop="douYinNum" width="100">
        </el-table-column>
        <el-table-column label="创建时间" prop="addDate">
        </el-table-column>
        <el-table-column width="185" align="center" fixed="right" label="操作">
          <template #default="scope">
            <el-button text size="small" class="operation_bt" :icon="Edit" type="info" @click="showView(scope.row)">详情
            </el-button>

            <el-button text size="small" class="operation_bt" :icon="Edit" type="primary" @click="editView(scope.row)">
              编辑
            </el-button>

            <el-button text :icon="deleteIcon" class="operation_bt" type="danger" size="small" style="cursor: pointer;"
                       @click="deleteData(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="page">
        <el-pagination background :current-page="searchObject.no" :page-sizes="[10, 20, 50, 100]"
                       :page-size="tableData.size" pager-count="10"
                       layout="total, sizes, prev, pager, next, jumper" :page-count="tableData.totalPage"
                       :total="tableData.total" @size-change="sizeChange" @current-change="pageChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {Delete, Edit} from '@element-plus/icons-vue'
import common from "@/mixins/common.js";
import {modelStore} from "@/stores/modules/model"
import {mapActions, mapState} from 'pinia'

export default {
  name: "model_index",
  mixins: [common],
  data() {
    return {
      Edit: Edit,
      deleteIcon: Delete,
      adPositionOptions: [],
      dialogVisible: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      loading: false,
      tableData: {},
    }
  },
  computed:{
    ...mapState(modelStore, ['searchObject']),
  },
  mounted() {

    this.getSearchList();

  },
  methods: {
    ...mapActions(modelStore, ['updateSearchObject']),
    async getSearchList() {
      this.loading = true;
      let data = this.searchObject;
      let res = await this.$http.form("/tenantRest/staff/search.htm", data);
      if (res.code === 0) {
        this.tableData = res;
      }
      this.loading = false;
      //this.$tool.data.set("model_search", this.searchObject);
      this.updateSearchObject(this.searchObject);

    },
    addView() {
      this.$router.push({
        path: 'add'
      });
    },
    showView(row) {
      let data = {};
      data.id = row.id;
      this.$router.push({
        path: 'view',
        query: data
      });
    },
    editView(row) {
      let data = {};
      data.id = row.id;
      this.$router.push({
        path: 'update',
        query: data
      });
    },
    deleteData(row) {
      this.selectId = row.id;
      this.dialogVisible = true;
    },
    clearSearch() {
      this.searchObject.key = "";
      this.searchObject.name = "";
      this.searchObject.name = "";
      this.searchObject.phone = "";
      this.searchObject.cardNo = "";
    },
    async handleClose() {

      this.dialogVisible = false;
      if (this.selectId) {
        let params = {};
        params.id = this.selectId;
        let res = await this.$http.form("/tenantRest/model/delete.htm", params);
        if (res.code === 0) {
          this.$message({
            message: '删除数据成功',
            type: 'success'
          });
          await this.getSearchList();
        } else {
          this.$message.error(res.msg);
        }
      }

    }

  },
}
</script>

<style scoped>

</style>
